<template>
	<view class="coupon">
		<!-- 轮播图 -->
		<view class="swiper" v-if="swiperList.length">
			<u-swiper :list="swiperList" height="270" border-radius="8" mode="rect" interval="5000"
				indicator-pos="bottomCenter"></u-swiper>
		</view>
		<!-- 导航栏 -->
		<view class="tabs">
			<view v-for="(item,index) in tabsList" :key="index" class="tabItem" @click="changeTabs(index)">
				<view class="size"
					:style="{color:TabsCurrent == index ?'#73F0EA':'#999999',fontWeight:TabsCurrent == index ?'800':'400'}">
					{{item.name}}
				</view>
				<view class="sliding-block-box">
					<view class="sliding-block-child" v-if="TabsCurrent == index">

					</view>
				</view>

			</view>
		</view>
		<!-- 列表 -->
		<scroll-view scroll-y="true" class="scroll_box">
			<view class="comlum_box" v-if="popupList.length">
				<view v-for="(item,index) in popupList" :key="index" class="item">
					<view class="header">
						<!-- 满减 -->
						<view class="left">
							<view class="minus">
								<view class="unit">
									￥
								</view>
								<view class="number">
									{{item.face}}
								</view>
							</view>
							<view class="full">
								{{item.threshold}}
							</view>
						</view>
						<!-- 虚线 -->
						<view class="height-dotted-line">
						</view>
						<!-- 名称 -->
						<view class="right">
							<view class="name-of-shop">
								<view class="title">
									{{item.name}}
								</view>
								<view class="rice_bottom ">
									<text class="size1">共</text>
									<text class="size2">{{item.quantity}}</text>
									<text class="size1">张</text>
									<view class="separator">
									</view>
									<text class="size1">已抢</text>
									<text class="size3">{{item.ratio}}%</text>
								</view>
							</view>

						</view>
						<view class="drawbtn" v-if="!item.is_draw" @click="routeDraw(item, index)">
							领取
						</view>
						<view class="drawbtn1" v-if="item.is_draw == 2">
							已领完
						</view>
						<view class="drawbtn2" v-if="item.is_draw == 1">
							已领取
						</view>
					</view>
					<!-- 虚线 -->
					<view class="width-dotted-line">
					</view>
					<view class="Folding-panel">
						<view class="row-box" @click="toggle(index)">
							<view class="official">
								{{item.top_ast}}
							</view>
							<u-icon :name="item.open?'arrow-up':'arrow-down'" size="14" color="#dbdbdb"></u-icon>
						</view>
						<view class="remark" v-if="item.open">
							<view v-for="(childitem,childindex) in item.ast_list" class="official" :key="childindex">
								{{childitem}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<empty v-else :content="'优惠券'"></empty>
		</scroll-view>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		props: {
			swiperList: {
				type: Array,
				default: [],
				required: true
			},
			tabsList: {
				type: Array,
				default: [],
				required: true
			},
			TabsCurrent: {
				type: Number,
				default: 0,
				required: true
			},
			popupList: {
				type: Array,
				default: [],
				required: true
			},
		},
		data() {
			return {

			}
		},
		
		methods: {
			routeDraw(item, index){
				this.$emit('changeDraw', item ,index)
			},
			changeTabs(index) {
				this.$emit('changeTabs', index)
			},
			toggle(index) {
				this.$emit('toggle', index)
				// this.$set(this.popupList[index], 'isOpen', !this.popupList[index].isOpen);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.coupon {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 24rpx 24rpx 0;
		width: 100%;

		.swiper {
			width: 100%;
			height: 270rpx;
		}

		.tabs {
			margin-top: 30rpx;
			height: 60rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			border-bottom: 1rpx solid #e9e9e9;

			.tabItem {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 60rpx;

				.size {
					font-size: 28rpx;
					letter-spacing: 0.62rpx;
					font-family: PingFang SC, PingFang SC-Heavy;
				}

				.sliding-block-box {
					height: 20rpx;
					padding-top: 12rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				.sliding-block-child {
					width: 44rpx;
					height: 8rpx;
					background: #73F0EA;
					border: 2rpx solid rgba(0, 0, 0, 0.00);
					border-radius: 2rpx;
				}
			}
		}

		.scroll_box {
			width: 100%;
			height: 70vh;

			.comlum_box {
				display: flex;
				flex-direction: column;
				width: 100%;
				padding-top: 26rpx;

				.item {
					width: 702rpx;
					background: #f6f6f6;
					border-radius: 16rpx;
					display: flex;
					flex-direction: column;
					margin-bottom: 20rpx;

					.header {
						width: 100%;
						height: 158rpx;
						display: flex;
						flex-direction: row;
						align-items: center;

						.left {
							width: 185rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							padding-left: 32rpx;

							.minus {
								display: flex;
								flex-direction: row;
								align-items: baseline;
								margin-bottom: 2rpx;

								.unit {
									font-size: 24rpx;
									font-family: PingFang SC, PingFang SC-Bold;
									font-weight: 700;
									text-align: left;
									color: #f37364;
								}

								.number {
									font-size: 38rpx;
									font-family: DIN, DIN-Bold;
									font-weight: 700;
									text-align: left;
									color: #f37364;
								}
							}

							.full {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: center;
								color: #666666;
							}
						}

						.height-dotted-line {
							width: 0rpx;
							height: 118rpx;
							opacity: 0.1;
							border: 1rpx dashed #333333;
							margin-right: 33rpx;
						}

						.right {
							flex: 1;
							padding-right: 32rpx;
							display: flex;
							flex-direction: row;
							align-items: center;

							.name-of-shop {
								display: flex;
								flex-direction: column;
								flex: 1;

								.title {
									font-size: 32rpx;
									font-family: PingFang SC, PingFang SC-Bold;
									font-weight: 700;
									text-align: left;
									color: #333333;
									margin-bottom: 8rpx;
								}

								.rice_bottom {
									display: flex;
									flex-direction: row;
									align-items: center;
									font-size: 20rpx;
									font-family: PingFang SC, PingFang SC-Medium;
									font-weight: 500;

									.size1 {
										color: #666666;
									}

									.size2 {
										color: #73F0EA;
									}

									.size3 {
										color: #F37364;
									}

									.separator {
										height: 28rpx;
										width: 0;
										border: 1rpx solid #666666;
										margin: 0 10rpx;
										opacity: 0.5;
									}
								}
							}


						}

						.drawbtn {
							transform: rotateZ(360deg);
							width: 134rpx;
							height: 64rpx;
							background: #73F0EA;
							border: 1rpx solid #73F0EA;
							border-radius: 16rpx;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: center;
							color: #ffffff;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 30rpx;
						}
						
						.drawbtn1{
							transform: rotateZ(360deg);
							width: 134rpx;
							height: 64rpx;
							border: 1rpx solid #73F0EA;
							border-radius: 16rpx;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: center;
							color: #73F0EA;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 30rpx;
						}
						.drawbtn2{
							width: 134rpx;
							height: 64rpx;
							background: #e9e9e9;
							border-radius: 16rpx;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: center;
							color: #b6b6b6;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 30rpx;
						}
					}

					// 虚线
					.width-dotted-line {
						opacity: 0.1;
						border: 1rpx dashed #333333;
					}

					// 折叠面板
					.Folding-panel {
						display: flex;
						flex-direction: column;
						width: 100%;
						padding: 0 32rpx 16rpx;

						.row-box {
							width: 100%;
							display: flex;
							flex-direction: row;
							align-items: center;
						}

						.official {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: left;
							color: #666666;
							flex: 1;
							margin-top: 18rpx;
						}

						.remark {
							width: 578rpx;
							display: flex;
							flex-direction: column;
						}
					}
				}
			}
		}
	}
</style>